<template>
    <div class = "order-list-container">
        <div class = "olc-head">
            <span>订单编号：{{ ibase.number }}</span>
            <span>{{ buildStateText }}</span>
        </div>
        <div v-if = "ibase.name" class = "olc-shop">
            <div class = "olc-shopname">
                <img src = "../../../../static/images/shop.png" />
                <span>{{ ibase.name }}</span>
            </div>
            <div class = "olc-time">{{ ibase.time }}</div>
        </div>
        <order-list-item :ibase = "ibase" :dataset = "dataset" type = "salesman" />
        <div class = "olc-price">
            <p>订单合计：<span>￥</span><span>{{ parseFloat(ibase.amount).toFixed(2) }}</span></p>
            <p v-if = "ibase.protect" class = "tip-footer">(价格保护已开启)</p>
        </div>
        <div v-if = "mode != 'unbutton'" :class = "{'olc-footer': !stylePlan, 'olc-footer-qun': stylePlan}">

            <van-button @click = "eventClickButtonOperate" slot = "button" size = "small" type = "primary"
                        class = "normal-diy-button" round>{{ buildHostButtonText }}
            </van-button>

            <van-button v-if = "textType == 'collect'" @click = "eventClickOrderllocation" slot = "button"
                        size = "small" type = "primary"
                        class = "normal-diy-button" round style = "margin-right: 1rem">分配订单
            </van-button>

            <van-button v-if = "textType == 'salesman-confirm'" @click = "eventClickButtonOperateDetail" slot = "button"
                        size = "small" type = "primary" class = "order-assist-button" round>取消订单
            </van-button>

            <van-button v-if = "textType == 'salesman-confirm'" @click = "eventClickButtonTransferOrder" slot = "button"
                        size = "small" type = "primary" class = "order-assist-button" round>分配订单
            </van-button>
        </div>


        <!--分配订单-->
        <van-popup
                v-model = "show"
                round
                position = "bottom"
                :style = "{ height: '40%' }"
        >
            <van-picker :columns = "columns" @cancel = "onCancel"
                        @confirm = "onConfirm" show-toolbar title="业务员"
            />
        </van-popup>
    </div>
</template>

<script>
    import {Button, Dialog, Picker, ActionSheet, Popup, Toast} from 'vant';
    import OrderListItem from './normal-list-base.vue';

    export default {
        components: {
            [Button.name]: Button,
            [Picker.name]: Picker,
            [Dialog.name]: Dialog,
            [Popup.name]: Popup,
            [ActionSheet.name]: ActionSheet,
            [Toast.name]: Toast,
            OrderListItem
        },
        props: ['textType', 'ibase', 'dataset', 'mode', 'index'],
        data() {
            return {
                show: false,
                columns: [], //人员的名字
                columnsPwd: [], // 人员的id
                id: '', // 单独id接收
            }
        },
        computed: {
            buildStateText() {
                var stateText = '';
                switch (this.textType) {
                    case 'collect':
                        stateText = '待收取';
                        break;
                    case 'confirm':
                    case 'salesman-confirm':
                        stateText = '待确认';
                        break;
                    case 'complete':
                        stateText = '已完成';
                        break;
                    case 'cancel':
                        stateText = '已取消';
                        break;
                }

                return stateText;
            },
            buildHostButtonText() {
                var buttonText = '';
                switch (this.textType) {
                    //case 'collect':
                    //    buttonText = '分配订单';
                    //    break;
                    default:
                        buttonText = '查看详情';
                        break;
                }
                return buttonText;
            },
            stylePlan() {
                return this.ibase.style ? true : false;
            }
        },
        mounted() {
        },
        methods: {
            eventClickButtonOperate() {
                switch (this.textType) {
                    case 'collect':
                        this.$router.push({
                            path: '/salesman/collect-change',
                            query: {
                                ordernumber: this.ibase.number
                            }
                        });
                        break;
                    case 'complete':
                    case 'cancel':
                    case 'confirm':
                    case 'salesman-confirm':
                        this.$router.push({
                            path: '/salesman/collect-details',
                            query: {
                                ordernumber: this.ibase.number,
                                barState: 1
                            }
                        });
                        break;
                }
            },
            eventClickButtonOperateDetail() {
                var url = '/api/home/order/cancel',
                    params = {
                        ordernumber: this.ibase.number
                    };

                this.$util.postRequestInterface(url, param, (res) => {
                    this.$emit('onCancelOrder');
                });
            },
            //分配订单
            eventClickOrderllocation() {
                this.show = true
                this.eventGetAllOrder()
            },
            //获取所有的业务员
            eventGetAllOrder() {
                var that = this;
                var url = '/api/home/user/getall';
                var param = {
                    token: this.$store.state.options.user.token
                };
                this.$util.postRequestInterface(url, param, (res) => {
                    this.columns = res.data.name
                    this.columnsPwd = res.data.id
                    console.log(res);
                })
            },
            //分配给单独的业务员
            eventDistributionlerk() {
                var url = '/api/home/order/change';
                var param = {
                    type: 'fenpei',
                    id: this.ibase.id, // 订单ID
                    upid: this.id, // 业务员id
                    token: this.$store.state.options.user.token,
                };
                this.$util.postRequestInterface(url, param, (res) => {
                    console.log(res);
                    Toast('分配成功');
                    this.show = false;
                })
            },
            //上面的取消按钮
            onCancel() {
                this.show = false
                Toast('取消');
            },
            //上面的确定按钮
            onConfirm(value,index) {
                this.id = this.columnsPwd[index]
                console.log(index)
                console.log(this.columnsPwd)
                this.eventDistributionlerk()
                this.show = false
            },
        }
    }
</script>

<style lang = "scss" scoped>
    .order-list-container {
        border-bottom: 0.4rem solid #EEEEEE;

        .olc-head {
            margin-bottom: 1rem;
            padding: 0.5rem 0rem 0.8rem;
            border-bottom: 0.1rem solid #EEEEEE;
            display: flex;
            justify-content: space-between;

            span:first-child {
                font-size: 1.3rem;
                color: #999999;
            }

            span:last-child {
                font-size: 1.3rem;
                color: #00CC00;
            }
        }

        .olc-price {
            padding: 1rem 0rem 0rem;
            text-align: right;

            p:first-child {
                font-size: 1.4rem;
                color: #999999;

                span {
                    color: #FF0101;
                }

                span:first-child {
                    font-size: 1.4rem;
                }

                span:last-child {
                    font-size: 1.9rem;
                }
            }

            .tip-footer {
                font-size: 1.3rem;
                color: #FF9000;
            }
        }

        .olc-footer, .olc-footer-qun {
            margin-top: 1rem;
            padding: 1rem 0rem;
            border-top: 0.1rem solid #EEEEEE;
            display: flex;
            flex-direction: row-reverse;
        }

        .olc-footer-qun {
            margin: 0rem;
            padding-top: 0.5rem;
            border: none;
        }

        .olc-item {
            padding-bottom: 1rem;
            border-bottom: 0.1rem solid #EEEEEE;
        }

        .olc-shop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.4rem;
            margin-bottom: 1rem;

            .olc-shopname {
                color: #666666;

                img {
                    width: 1.4rem;
                    height: 1.4rem;
                    vertical-align: bottom;
                }
            }

            .olc-time {
                color: #999999;
            }
        }
    }

    .order-assist-button {
        background-color: #ffffff;
        color: #00CC00 !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        font-size: 1.3rem;
        margin-right: 0.8rem;
    }
</style>
